<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <script src="data.js" charset="utf-8"></script>
    <script src="flexible.js"></script>

    <script>
        window.onload = function(){
            // 页面的总宽度
            var ww = document.body.clientWidth || document.documentElement.clientWidth;
            // 页面的总高度
            var wh = document.body.clientHeight || document.documentElement.clientHeight;
            // 页面的宽高比
            var r = wh / ww;
            // 淘宝适配代码将页面的宽等分为10份，共10rem
            var cntHeight = r*10-2;
            cnt.style.height = cntHeight+"rem";
        }
    </script>

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            border: 0;
        }
        .clearfix:after{
            display:table;
            clear:both;
            content:"";
        }
        .fl{
            float:left;
        }
        html,body{
            height:100%;
        }
        .top{
            height:1rem;
            min-height: 1rem;
            background:#ccc;
            font-size:16px;
        }
        .bottom{
            position:fixed;
            bottom:0px;
            left:0px;
            right:0px;
            width:100%;
            height:1rem;
            background:#ccc;
        }
        .cnt{
            background:red;
            height:15.77777777777778rem;
        }
        .cnt .sub_nav{
            width:2rem;
            height:100%;
            background:green;
            overflow-y:auto;
            font-size:14px;
            -webkit-overflow-scrolling: touch;
        }
        .cnt .cat_list{
            overflow-y:auto;
            font-size:12px;
            -webkit-overflow-scrolling: touch;
        }
        .sub_nav>div{
            height:40px;
            line-height:40px;
            text-align:center;
        }
        .div_active{
            background:white;
            color:red;
        }

        .cnt .cat_list{
            width:8rem;
            height:100%;
            background:pink;
        }
        .cat{
            margin-left:8px;
            margin-bottom:8px;

        }
        .smallcatList{
            margin:20px auto;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
</head>
<body>
  <div class="all">
      <div class="top">123</div>
      <div class="cnt clearfix" id="cnt">
          <div class="sub_nav fl" id="leftnav"></div>
          <div class="cat_list fl" id="cat_list">

          </div>
      </div>
      <div class="bottom"></div>
  </div>

  <script>
      //打印整体数据，你可以仔细看一看
      console.log(data);
      //得到我们目标数据，其中包含三层分类
      var arrs = data.json.keywordAreas;

      //这段循环用来加载左侧大分类
      for(var i=0;i<arrs.length;i++){
          //假设某一个大分类的名字是a
          var a = arrs[i];
          //创建一个层，并起名为navLi
          var navLi = document.createElement("div");
          //使用index属性记住当前分类的序号
          navLi.index  = i;
          //当单击某一个分类时
          navLi.onclick = function(){
             //记载对应小分类的数据，显示右侧
            loadCatData(this.index);
              //将所有的分类div的class属性清空
              clearNavLiClassName();
              //将当前分类div的class属性设置为点击状态，即白底红字
            this.className = "div_active";

          };
          //默认将第一个分类div，设置为选中状态
          if(i==0){
              navLi.className = "div_active";
          }
          //给分类div设置内容
          navLi.innerHTML = a.areaName;
          //将该分类div插入进左侧导航
          leftnav.appendChild(navLi);
      }

      // 将所有的分类div的class属性清空
      function  clearNavLiClassName(){
          //得到所有左侧导航的div数组，并起名为divs
          var divs = leftnav.getElementsByTagName("div");
          for(var i=0;i<divs.length;i++){
              //循环将所有div的class赋值为空串
              divs[i].className = "";
          }
      }

      //加载第一个大分类的子数据
      loadCatData(0);

      //加载对应的左侧导航大分类的 小分类数据
     function loadCatData(num){
         //首先将右侧小分类数据清空
         cat_list.innerHTML = "";
         //得到对应小分类数据，并起名为arrs2
         var arrs2 = arrs[num].level1words;

         // 循环小分类
         for(var j=0;j<arrs2.length;j++){
             //a2 是某一个小分类
             var a2 = arrs2[j];
             //创建div
             var navLi = document.createElement("div");
             navLi.innerHTML = a2.keyword;
             navLi.style.fontWeight = "700";
             navLi.style.fontSize = "18px";
             //将其加入到右侧层
             cat_list.appendChild(navLi);

             var smallcatList = document.createElement("div");
             smallcatList.className = "smallcatList clearfix";
             var arrs3 = a2.level2words;
             for(var k=0;k<arrs3.length;k++){
                 var a3 = arrs3[k];

                 var catDiv = document.createElement("div");
                 catDiv.className = "cat fl";

                 catDiv.style.width = "30%";
                 var imageDiv = document.createElement("img");
                 imageDiv.src = "http:"+a3.imageUrl;
                 imageDiv.style.width = "100%";
                 var txtDiv = document.createElement("div");
                 txtDiv.innerHTML = a3.keyword;

                 txtDiv.onclick = function(){
                     location = 'https://so.m.jd.com/ware/search.action?keyword='+this.innerHTML
                         +'&searchFrom=category';
                 };
                 catDiv.appendChild(imageDiv);
                 catDiv.appendChild(txtDiv);
                 smallcatList.appendChild(catDiv);
             }
             cat_list.appendChild(smallcatList);
         }
     }


  </script>
</body>
</html>